<template>
  <view>
    <!-- 搜索条 -->
    <uni-nav-bar>
      <block slot="left">
        <view class="city" @click="toLocation">
          <view>
            <text class="uni-nav-bar-text">{{ city }}</text>
          </view>
          <uni-icons type="arrowdown" color="#666" size="14" />
        </view>
      </block>
      <view class="input-view" @click="tosearch">
        <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
        <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm" />
        <!-- <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search> -->
      </view>
      <block slot="right">
        <view class="text" >
          搜索
        </view>
      </block>
    </uni-nav-bar>
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="info" @clickItem="clickItem" :current="current" :mode="mode" field="content">
      <swiper class="swiper-box">
        <swiper-item v-for="(item ,index) in info" :key="index">
          <image :src="item.image" style="width: 750rpx"></image>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <!-- 宫格组件 column 当前是4个列  -->
    <uni-grid class="nav" :show-border="false" :column="4">
      <uni-grid-item v-for="(item, index) in navList" :index="index" :key="index">
        <view @click="toNav(item.url)" class="grid-item-box" style="background-color: #fff;">
          <image class="image" :src="item.src"></image>
          <text class="text">{{item.name}}</text>
        </view>
      </uni-grid-item>
    </uni-grid>
    <!-- 公告栏 -->
    <uni-notice-bar color="#2979FF" background-color="#fff" show-icon text="需要租房的朋友可以联系我们" />

    <view class="order" v-for="(item, index) in houseList" :key="index" @click="todetail(item.id)">
      <!-- <view class="top">
        <view class="left">
          <view class="store">
            <u-text mode="name" :text="item.ownerName" format="encrypt"></u-text>
            <u-text mode="phone" :text="item.owerPhone" format="encrypt"></u-text>
          </view>
          <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
        </view>
      </view> -->
      <view class="item">
        <view class="left">
          <image :src="item.faceUrl" mode="aspectFill"></image>
        </view>
        <view class="content">
          <view class="title u-line-2">
            {{item.villageName}} &nbsp; &nbsp; &nbsp; &nbsp;
            {{item.type == '整租' ? item.houseNum + item.houseHall + item.toiletNum : item.type}}
          </view>
          <view class="price">¥{{item.price}}/月</view>
          <view class="type">
             {{item.type == '整租' ? item.type : item.roomType}} | {{item.type == '整租' ? item.houseArea : item.roomArea}}㎡ | {{item.decoration}}
          </view>
        </view>
      </view>
      <view class="bottom">
        <u-text text="出租人"></u-text> &nbsp;&nbsp;&nbsp;
        <u-text mode="name" :text="item.ownerName" format="encrypt"></u-text>
        <u-text text="电话"></u-text>
        <u-text mode="phone" :text="item.owerPhone" format="encrypt"></u-text>
        <view class="evaluate btn">查看</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  onShow() {
    // 获取本地城市
    this.getLocationCity()
    // 获取房源
    this.findHouseList()
  },
  data() {
    return {
      city: '石家庄市', // 搜索栏数据
      // 轮播的基本数据
      current: 0,
      mode: 'default',

      info: [
        {
          image: '/static/img/index/swiper/bg2.png',
          title: '身无彩凤双飞翼，心有灵犀一点通'
        },
        {
          image: '/static/img/index/swiper/bg4.png',
          title: '身无彩凤双飞翼，心有灵犀一点通'
        }
      ],
      navList: [
        {
          name: '整租',
          src: '/static/img/index/cover_2022/index_cover1.png',
          type: '0',
          url: '/pages/hire/hire?index=1'
        },
        {
          name: '合租',
          src: '/static/img/index/cover_2022/index_cover2.png',
          type: '1',
          url: '/pages/hire/hire?index=2'
        },
        {
          name: '避坑指南',
          src: '/static/img/index/cover_2022/index_cover3.png',
          url: '/pages/calc/calc'
        },
        {
          name: '卖方委托',
          src: '/static/img/index/cover_2022/index_cover4.png',
          type: '2',
          url: '/pages/sale/saleList'
        }
      ],
      houseList: []
    }
  },
  methods: {
    tosearch() {
      // 跳转到search页面
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },
    todetail(id) {
      // 跳转到 房源详情页面
      uni.navigateTo({
        url: `/pages/detail/detail?id=${id}`
      })
    },
    getLocationCity() {
      let locationCity = uni.getStorageSync('locationCity')
      // 如果地址没有需要默认值
      if (!locationCity) {
        this.city = '石家庄市'
        return
      }
      this.city = locationCity
    },
    toLocation() {
      uni.navigateTo({
        url: '/pages/location/location'
      })
    },
    clickItem(e) {
      // 轮不同点击事件
      this.swiperDotIndex = e
    },
    // 查询房源的方法
    findHouseList() {
      // let url = "https://sourcebyte.vip/api/houseApi/findHouseRoomList";
      let url = 'http://127.0.0.1/houselist'
      uni.request({
        url: url,
        data: {},
        success: (res) => {
          // console.log(res)
          this.houseList = res.data.rows
        }
      })
    },
    // 跳转到 响应的页面
    toNav(url) {
      // 跳转到页面
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style lang="scss" >
/* 搜索栏 */
$nav-height: 30px;

.city {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 140rpx;
  // margin-left: 4px;
}
.text{
  font-size: 16px;
  padding-right: 10px;
}


.input-view {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  // width: 500rpx;
  flex: 1;
  background-color: #f8f8f8;
  height: $nav-height;
  border-radius: 15px;
  padding: 0 15px;
  flex-wrap: nowrap;
  margin: 7px 0;
  line-height: $nav-height;
  .input-uni-icon {
    line-height: $nav-height;
  }

  .nav-bar-input {
    height: $nav-height;
    line-height: $nav-height;
    /* #ifdef APP-PLUS-NVUE */
    width: 370rpx;
    /* #endif */
    padding: 0 5px;
    font-size: 12px;
    background-color: #f8f8f8;
  }
}

/* 轮播图 */
.swiper-box {
  height: 200px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #000;
}

.uni-swiper-dot-box {
  width: 400px;
  margin: 0 auto;
  margin-top: 8px;
}

//  宫格,导航条
.nav {
  .grid-item-box {
    flex: 25%;
    // position: relative;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10rpx;

    .image {
      width: 120rpx;
      height: 120rpx;
    }
  }
}

/* 宫格,房源数据 */
.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 20rpx auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
  .top {
    .left {
      display: flex;
      justify-content: space-around;
      .store {
        display: flex;
        // margin: 0 10rpx;
        font-size: 32rpx;
      }
    }

    .right {
      color: #2979ff;
    }
  }

  .item {
    display: flex;
    margin: 20rpx 0 0;

    .left {
      margin-right: 30rpx;

      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
      }
    }

    .content {
      .title {
        font-weight: bold;
        font-size: 28rpx;
        line-height: 50rpx;
      }

      .price {
        margin: 10rpx 0;
        font-size: 30rpx;
        color: #ff0000;
      }

      .type {
        margin: 10rpx 0;
        font-size: 24rpx;
      }
    }
  }

  .bottom {
    display: flex;
    // margin-top: 40rpx;
    padding: 0 10rpx;
    justify-content: flex-end;
    align-items: center;
    .btn {
      margin-left: 20rpx;
      line-height: 52rpx;
      width: 160rpx;
      border-radius: 26rpx;
      border: 2rpx solid #ccc;
      font-size: 26rpx;
      text-align: center;
      color: #ccc;
    }

    .evaluate {
      color: $u-tips-color;
      border-color: $u-tips-color;
    }
  }
}

.wrap {
  font: 900 16px Pingfang SC;
  //font: 33rpx/1 Tahoma,Arial,'Microsoft YaHei','黑体','宋体',sans-serif;
  padding: 20px 12px;
  .house-name {
    padding: 0;
    margin-top: -17rpx;
    line-height: 170%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
  }

  .house_pq {
    display: inline-block;
    text-align: center;
    //border: 1px solid #18b9ff;
    padding: 4rpx 9rpx;
    margin: 10rpx 5rpx;
    font-size: 26rpx;
    background-color: #f3f4f7;
    color: #888;
  }
}
</style>
